<template>
  <div class="select">
    <div class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></div>
    <div class="options1" v-show="options1isShow">
      <ul>
        <li v-on:click="toClick(option.value)" v-for="option in options">{{option.label}}</li>
      </ul>
    </div>
    <div class="options2" v-show="options2isShow">
      <ul >
        <li v-for="item in secondOptions" v-on:click="selectResult(item.label,item.value)">{{item.label}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'multSelect',
    data() {
      return {
        options: [
          {
            value: 'zhinan',
            label: '指南',
            children: [
              {
                value: 'yizhi',
                label: '一致'
              }, {
                value: 'fankui',
                label: '反馈'
              }, {
                value: 'xiaolv',
                label: '效率'
              }, {
                value: 'kekong',
                label: '可控'
              }
            ]
          },
          {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            },
            {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }
        ],
        secondOptions: [],
        options1isShow: false,
        options2isShow: false,
        result: ''
      }
    },
    methods: {
      options1Show: function() {
        this.options1isShow = true
      },
      toClick: function(item) {
        this.secondOptions = []
        for (var i = 0; i < this.options.length; i++) {
          if (this.options[i].value === item) {
            console.log(this.options[i].children)
            this.secondOptions = this.options[i].children
            console.log(this.secondOptions)
          }
        }
        this.options2isShow = true
      },
      selectResult: function(label) {
        this.result = label
        this.options1isShow = false
        this.options2isShow = false
      }
    }
  }
</script>
<style>
  li,ul{
    list-style: none;
    padding:0;
    margin:0;
  }
  li{
    height:40px;
    line-height: 40px;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
  }
  .select{
    position: relative;
  }
  .input_text>input{
    width:170px;
    height:30px;
    border:1px solid #ddd;
  }
  .options1,.options2{
    width:170px;
    height:200px;
    border:1px solid #ddd;
    position: absolute;
    background: #fff;
    overflow-y: auto;
  }
  .options2{
    left:170px;
  }
</style>
